<template>
	<div class="system-add-role-container">
		<el-dialog title="新增角色" v-model="isShowDialog" width="600px">
			<easy-form :fieldList="fieldList" :model="model" ref="formRef" :options="options"></easy-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">新 增</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs, defineComponent ,defineEmits,ref} from 'vue';
import { rolesApi } from '/@/api/system/role'
import { ElMessage } from 'element-plus'
import { exampleForm } from '/@/utils/form' 
import EasyForm from '/@/components/form/index.vue'

interface RoleState {
	isShowDialog: boolean
}

export default defineComponent({
	name: 'systemAddRole',
	components : {EasyForm},
	setup() {
		const formRef = ref()
		// form 表单
		const model = ref<Record<string, any>>({
			id : 0,
			name : '',
			code : '',
			remark : ''
		})

		// 
		const state = reactive<RoleState>({
			isShowDialog: false
		});

		const fieldList: Form.FieldItem[] = [
			{ label: '角色名称', field: 'name',placeholder:'请输入 角色名称' ,rules:[{ required: true, message: '请输入 角色名称' }]},
			{ label: '角色编码', field: 'code',placeholder:'请输入 角色编码' ,rules:[{ required: true, message: '请输入 角色编码' }]},
			{ label: '备注', field: 'remark',placeholder:'请输入 备注' },
		] 
		
		// Options 配置项
		const options = reactive<Form.Options>({
			showResetButton:false
		})

		// 保存
		const roleSave = async()=> {
			return await rolesApi().save( model.value )
		}

		// 打开弹窗
		const openDialog = ( row : Record<string, any> ) => {
			if ( row ) {
				model.value = row
				console.log('row:',model.value )
			}
			state.isShowDialog = true;
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};

		// 取消
		const onCancel = () => {
			closeDialog();
		};

		// 新增
		const onSubmit = async() => {
			if (!formRef) return
			if (formRef.value.validData()) {
				console.log(model.value)
				// let {code,msg} = await roleSave()
				// 	if ( code == 0 ) {
				// 		ElMessage.success(msg)
				// 		closeDialog();
				// } else {
				// 		ElMessage.error(msg)
				// }
			} else {
					return false
			}
		}

		const handleBaseSubmit = (model : Record<string, any>) =>{
			console.log(model)
		}
		
		return {
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			...toRefs(state),
			handleBaseSubmit,
			fieldList,
			options,
			formRef,
			model
		};
	}
});
</script>
